<template>
    <div class="chart-box" ref="chart"> </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "TeamPass",
    data() {
        return {
            options: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '5%',
                    right: '9%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    name: '达标率',
                    nameLocation: 'end',
                    nameGap:5,
                    data: [
                        '20-25%',
                        '40-50%',
                        '60-75%',
                        '80%',
                        '100%',
                    ],
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: true //隐藏X轴刻度
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff' //X轴文字颜色
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '个数',
                    nameTextStyle: {
                        color: '#fff'
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: [
                    {
                        name: '销售水量',
                        type: 'line',
                        showAllSymbol: true, //显示所有图形。
                        symbol: 'circle', //标记的图形为实心圆
                        symbolSize: 10, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: 'rgb(108, 161, 132)'
                        },
                        lineStyle: {
                            color: 'rgb(108, 161, 132)'
                        },
                        data: [4.2, 3.8, 4.8, 3.5, 2.9]
                    },
                    {
                        name: '主营业务',
                        type: 'bar',
                        barWidth: 15,
                        itemStyle: {
                            color: 'rgb(99, 146, 245)'
                        },
                        data: [4.2, 3.8, 4.8, 3.5, 2.9]
                    }
                ]
            }
        }
    },
    mounted() {
        setTimeout(() => {
            const chart = echarts.init(this.$refs.chart)
            chart.setOption(this.options)
        }, 0);
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 225px;
}
</style>